<template>
  <n-modal
    v-model:show='showModal'
    preset='card'
    :title='title'
    :show-icon='false'
    class='w-800px'
  >
    <!-- 创建和编辑区域 -->
    <mycard v-if="editType === 'add' || editType === 'edit'" class='p-2'>
      <flexform
        ref='flexFormref'
        :formList='formList'
        :formValue='formValue'
      >
      </flexform>
    </mycard>
    <!-- 回显区域 -->
    <mycard v-if="editType === 'view'"> 查看</mycard>

    <!-- 交互成功区域 -->
    <mycard v-if="editType === 'success'">
      <n-result status='success' title='成功' :description='resultText'>
      </n-result>
    </mycard>
    <!-- 交互失败区域 -->
    <mycard v-if="editType === 'error'">
      <n-result status='error' title='错误' :description='resultText'>
      </n-result>
    </mycard>
    <template #action>
      <div class='w-full flex justify-end items-center'>
        <n-button class='mx-1' v-if="editType === 'error'" @click='getreturn'
        >返回
        </n-button
        >
        <n-button class='mx-1' @click='handleClose'>关闭</n-button>
        <n-button
          class='mx-1'
          v-if="editType === 'add' || editType === 'edit'"
          type='primary'
          @click='handleSave'
        >确定
        </n-button
        >
      </div>
    </template>
  </n-modal>
</template>


<script setup name='educatModel' lang='ts'>
import { FormItemRule } from 'naive-ui'
import { useRoute, useRouter } from 'vue-router'
import { openAndClose } from '../../../hooks/useEdit'
import guiling from '../../../util/guiling'
import { ref, watch } from 'vue'

const router = useRouter()
const route = useRoute()
const flexFormref = ref<any>(null) // 表单组件
const formValue = ref<any>({}) // 表单数据
// 自定义重置组件的方法
const reset = () => {
  formValue.value = guiling(formValue.value)
}
// 自定义初始化需要执行的方法
const chushihua = (data: any = null,) => {
  if (data) {
    formValue.value = data
  }
  console.log(formValue.value, '显示是什么状态')
}
const emit = defineEmits(['close'])
// 从钩子中结构出需要的函数和属性
const {
  showModal,
  editType,
  resultText,
  init,
  handleClose,
  getsuccess,
  getfaild,
  title, http,
} = openAndClose(chushihua, reset, '', emit)

// 数字校验
const checknum = (rule: FormItemRule, value: string) => {
  const regx = /^[1-9]\d*$/
  if (!value) {
    return true
  } else if (value.length > 10) {
    return new Error('请输入长度10位以内正整数')
  } else if (!regx.test(value)) {
    return new Error('请输入长度10位以内正整数')
  } else {
    return true
  }
}

const checkTime = (rule: FormItemRule, value: string |number) => {
  console.log(value, rule,'现在什么情况')
  if (formValue.value.startTime && formValue.value.endTime) {
    if (formValue.value.startTime >= formValue.value.endTime) {
      return new Error('开始时间不能大于结束时间')
    } else {
      return true
    }
  } else {
    return true
  }
}
// 表单配置
const formList = ref([
  {
    label: '学校名称',
    key: 'schoolname',
    type: 'input',
    rules: [
      { required: true, message: '请输入学校名称', trigger: ['change', 'blur'] },
      {
        max: 200,
        min: 2,
        message: '请输入2-200为的字符',
        trigger: [ 'change', 'blur'],
      },
    ],
  },
  {
    label: '学历',
    key: 'level',
    type: 'select',
    rules: [
      { required: true, message: '请选择学历', trigger: [ 'change', 'blur'] },
    ],
  },
  {
    label: '学制',
    key: 'xuezhi',
    type: 'select',
    rules: [
      { required: true, message: '请选择学制', trigger: [ 'change', 'blur'] },
    ],
  },
  {
    label: '专业名称',
    key: 'zhuanye',
    type: 'input',
    rules: [
      { required: true, message: '请选择学制', trigger: [ 'change', 'blur'] },
      {
        max: 200,
        min: 2,
        message: '请输入2-200为的字符',
        trigger: [ 'change', 'blur'],
      },
    ],
  },
  {
    label: '是否毕业',
    key: 'complete',
    type: 'select',
    rules: [
      { required: true, message: '请选择是否毕业', trigger: [ 'change', 'blur'] },
    ],
  },
  {
    label: '开始时间',
    key: 'startTime',
    type: 'picker',
    rules: [
      {type:"number", required: true, message: '请选择开始时间', trigger: [ 'change', 'blur'] },
      { validator: checkTime, trigger: [ 'change', 'blur'] },
    ],
  },
  {
    label: '结束时间',
    key: 'endTime',
    type: 'picker',
    rules: [
      {type:"number",  required: true, message: '请选择结束时间', trigger: [ 'change', 'blur'] },
      { validator: checkTime, trigger: [ 'change', 'blur'] },
    ],
  },
])
const adddisabled = ref([])
const editdisabled = ref(['parent'])
watch(editType, () => {
  if (editType.value === 'add') {
    formList.value.forEach((item: any) => {
      if (adddisabled.value.includes(item.key as never)) {
        item.disabled = true
      }else{
        item.disabled = false
      }
    })
  } else if (editType.value === 'edit') {
    formList.value.forEach((item: any) => {
      if (editdisabled.value.includes(item.key as never)) {
        item.disabled = true
      }else{
        item.disabled = false
      }
    })
  }
})

// 点击确定
const handleSave = () => {
  console.log(formValue.value.id, 'id是否存在')
  if (formValue.value.id) {
    flexFormref.value && flexFormref.value.jiaoyan(updatefunc)
  } else {
    flexFormref.value && flexFormref.value.jiaoyan(createfunc)
  }
}

const createfunc = (data: any) => {
  getsuccess('创建成功')
}

const updatefunc = (data: any) => {
  http.putuserinfo(data).then(res => {
    if (res.data.code === 0) {
      getsuccess('修改成功')
    } else {
      getfaild(res.data.error || res.data.msg || '修改失败')
    }
  })
  getfaild('修改失败')
}

// 点击返回
const getreturn = () => {
  if (formValue.value.id) {
    editType.value = 'edit'
  } else {
    editType.value = 'add'
  }
  resultText.value = ''
}

// 抛出属性和方法
defineExpose({ init, handleClose })
</script>

<style scoped>
</style>
